<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2024/11/25
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- jstl --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <style>
        /* 整体页面的字体设置，这里使用了一种常见的字体族，你可以根据喜好更换 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4; /* 页面背景色设置为浅灰色，营造柔和的视觉效果 */
        }

        /* 标题样式 */
        h1 {
            color: #333; /* 标题颜色设为深灰色，使其更加醒目且不刺眼 */
            text-align: center; /* 让标题居中显示 */
            margin-top: 20px; /* 距离顶部添加一些间距 */
        }

        /* 图片样式 */
        img {
            display: block; /* 将图片设为块级元素，方便后续控制对齐等 */
            margin: 20px auto; /* 让图片在水平方向居中，上下添加一些间距 */
            border-radius: 50%; /* 如果图片是圆形头像等，设置为圆形，可根据实际情况调整 */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 给图片添加一点阴影，增加立体感 */
        }

        /* 管理员昵称段落样式 */
        p {
            text-align: center; /* 让昵称在水平方向居中显示 */
            color: #666; /* 昵称颜色设为稍浅一点的灰色 */
            font-size: 18px; /* 字体大小调整 */
            margin-bottom: 20px; /* 距离下方元素添加间距 */
        }

        /* 表单样式 */
        form {
            text-align: center; /* 让表单整体在页面居中 */
            margin-bottom: 30px; /* 距离下方表格添加一定间距 */
        }

        form input[type="text"] {
            padding: 10px; /* 输入框内边距，增加输入区域大小 */
            width: 200px; /* 输入框宽度设置 */
            border: 1px solid #ccc; /* 边框样式，使用浅灰色边框 */
            border-radius: 4px; /* 输入框边角设置为圆角 */
        }

        form input[type="submit"] {
            padding: 10px 20px; /* 按钮内边距，使其看起来更舒适 */
            background-color: #007bff; /* 按钮背景色设为常见的蓝色，代表可操作元素 */
            color: white; /* 按钮文字颜色设为白色，形成对比 */
            border: none; /* 去除默认边框 */
            border-radius: 4px; /* 按钮边角设为圆角 */
            cursor: pointer; /* 鼠标悬停时显示手型指针，表示可点击 */
            margin-left: 10px; /* 与输入框拉开一点距离 */
        }

        /* 表格样式 */
        table {
            width: 80%; /* 表格宽度设为页面宽度的80%，避免撑满整个页面显得拥挤 */
            margin: 0 auto; /* 让表格在页面水平方向居中 */
            border-collapse: collapse; /* 合并边框，让表格看起来更简洁 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 给表格添加淡淡的阴影，使其有一定层次感 */
        }

        table th, table td {
            padding: 10px; /* 表格单元格内边距，增加内容显示区域 */
            text-align: center; /* 单元格内容居中显示 */
            border: 1px solid #ccc; /* 单元格边框样式 */
        }

        table th {
            background-color: #007bff; /* 表头背景色设为蓝色，与按钮颜色呼应，突出表头 */
            color: white; /* 表头文字颜色设为白色 */
        }
    </style>
</head>
<body>
<!-- 展示图片，使用了 EL 表达式来拼接图片路径 -->
<img width="80px" src="Res/images/item/${admin.admin_profile_picture_src}" alt="">
<!-- 使用 EL 表达式展示管理员昵称 -->
<p>${admin.admin_nickname}</p>
<h1>登录完成</h1>

<!-- 查询用户的表单 -->
<form action="getUser">
    <input type="text" name="queryName" placeholder="昵称">
    <input type="submit" value="查询">
</form>

<!-- 用户列表表格 -->
<table>
    <tr>
        <th>编号</th>
        <th>账号</th>
        <th>昵称</th>
        <th>操作</th>
    </tr>
    <c:forEach var="user" items="${userList}">
        <tr>
            <td>${user.user_id}</td>
            <td>${user.user_name}</td>
            <td>${user.user_nickname}</td>
            <td><a href="editUser?user_id=${user.user_id}">编辑</a>
                <a href="updateUser"></a>
            </td>
        </tr>
    </c:forEach>
</table>
</body>
</html>